<template>
  <div class="capitalview">
    <el-dialog :visible.sync="dialogView" width="50%">
      <div class="card-name">
        <div class="name width1">信息详情</div>
      </div>
      <div class="content-con">
        <div class="form-item">
          <el-row :gutter="24">
            <el-col :span="12"
            v-for="(cap, index) in capData"
            :key="cap.id">
              <el-row style="padding-top: 15px;">
                <el-col :span="8" class="ban-left">
                  {{ cap.title }}
                </el-col>
                <el-col :span="16">
                  <el-input v-if="cap.title == '备注'" :autosize="{ minRows: 3, maxRows: 5 }" type="textarea" :value.sync="cap.value" size="medium" readonly></el-input>
                  <el-input v-else :value.sync="cap.value" size="medium" readonly></el-input>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
      <div slot="footer" class="ban-btn">
        <el-button @click="dialogView = false">返 回</el-button>
        <el-button class="save" @click="ok()">保 存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'CapitalView',
  props:{
    rows:{}
  },
  data() {
    return {
      dialogView: false,
      capData: []
    }
  },
  watch: {
      //immediate：true 将立即以表达式的当前值触发回调
      //handle：watch中需要具体执行的方法
      //deep：需要监听的数据的深度，一般用来监听对象中某个属性的变化
    rows: {
      handler(newval, oldVal) {
        // this.form = newval;
        this.capData = [
          {
            title: '流水单号',
            value: newval.capital_no
          },
          {
            title: '供应商编号',
            value: newval.supp_no
          },
          {
            title: '供应商名称',
            value: newval.supplier
          },
          {
            title: '未付款金额(元)',
            value: newval.not_pay
          },
          {
            title: '应付款金额(元)',
            value: newval.sh_pay
          },
          {
            title: '时间',
            value: newval.add_time
          },
          {
            title: '备注',
            value: newval.note
          }
        ]
      },
      deep: true
    }
  },
  methods:{
    //打开对话框
    openView() {
      this.dialogView = true;
    },

    ok () {
      this.dialogView = false;
    }
  }
}
</script>

<style>
</style>
